<template>
  <div id="statistics" class="manage-pos">
    <div class="dep_top">
      <query-statistics-form
        @resetParams="queryStatistics"
        @queryStatistics="queryStatistics"
        @exportExcel="exportExcel"
      />
    </div>
    <div class="dep_main">
      <s-table
        :scroll="{x: 1060}"
        ref="table"
        size="default"
        :row-key="(row, index) => index.toString()"
        :row-selection="rowSelection"
        :columns="columns"
        :data="loadData">
        <span slot="action" slot-scope="t, r">
          <a href="javascript:void(0);" @click="toDetail(r)">详情</a>
        </span>
      </s-table>
    </div>
    <StatisticsDialog v-if="isShowDialog" v-model="isShowDialog" :record="currentRow" />
  </div>
</template>
<script>
import { STable } from '@/components'
import QueryStatisticsForm from './modules/QueryStatisticsForm' // 查询组件
import { applyBusiList, exportSummaryExcel } from '@/api/leave'
import StatisticsDialog from './modules/statisticsDialog'
import { jsFileDownload } from '@/utils/util'

export default {
  name: 'Statistics',
  components: {
    StatisticsDialog,
    QueryStatisticsForm,
    STable
  },
  data () {
    return {
      rowSelection: {
        fixed: true,
        columnWidth: 50,
        selectedRowKeys: [],
        onChange: (selectedRowKeys, selectedRows) => {
          this.rowSelection.selectedRowKeys = selectedRowKeys
          let ids = selectedRows.map((value, key) => {
            let { id } = value
            return id
          })
          this.selectedRows = ids
        }
      },
      selectedRows: [],
      currentRow: null,
      isShowDialog: false,
      queryParam: {},
      paginationInfo: null,
      loadData: parameter => {
        this.paginationInfo = parameter
        return applyBusiList(Object.assign(parameter, this.queryParam))
          .then(res => {
            if (res.code === 0) {
              this.totalLeaveDays = res.data.totalLeaveDays
              return res.data.pageInfo
            } else {
              this.$message.error(res.msg)
              return {
                list: []
              }
            }
          })
      },
      totalLeaveDays: 0
    }
  },
  mounted () {
    this.$store.dispatch('setLeaveTypes')
  },
  computed: {
    columns () {
      return [
        {
          title: '序号',
          width: 90,
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          customRender: (t, r, index) => {
            return ((this.paginationInfo.pageNum - 1) * this.paginationInfo.pageSize + index + 1)
          }
        },
        {
          title: '员工姓名',
          width: 90,
          align: 'center',
          dataIndex: 'userInfo.username'
        },
        {
          title: '部门',
          width: 90,
          align: 'center',
          dataIndex: 'userInfo.employee.lasDepartmentinfo.depname'
        },
        {
          title: '请假类型',
          width: 90,
          align: 'center',
          dataIndex: 'detailFormList[0].lasCode.item_desc'
        },
        {
          title: '备注',
          width: 90,
          align: 'center',
          dataIndex: 'detailFormList[0].leaveComment',
          customRender: (text, record, index) => {
            return text
          }
        },
        {
          title: '开始时间',
          width: 150,
          align: 'center',
          dataIndex: 'detailFormList[0].startTime'
        },
        {
          title: '结束时间',
          width: 150,
          align: 'center',
          dataIndex: 'detailFormList[0].endTime'
        },
        {
          title: `请假时长(${this.totalLeaveDays}小时)`,
          width: 90,
          align: 'center',
          dataIndex: 'detailFormList[0].leaveDays'
        },
        {
          title: '操作',
          width: 90,
          fixed: 'right',
          dataIndex: '',
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ]
    }
  },
  methods: {
    toDetail (row) {
      this.currentRow = row
      this.isShowDialog = true
    },
    exportExcel (data) {
      if (this.selectedRows.length > 0) {
        data.id = this.selectedRows.join(',')
      }
      this.$loading.show({ tip: '文件导出中' })
      exportSummaryExcel(data).then(res => {
        this.$loading.hide()
        jsFileDownload(res, '请假汇总表.xlsx')
      })
    },
    queryStatistics (data) {
      this.queryParam = data
      this.$refs.table.refresh(true)
    }
  }
}
</script>
<style scoped>
</style>
